@require('./variables.styl');

.k-table
    position relative
    overflow hidden
    table
        table-layout fixed
        width 100%
        border-collapse collapse
        border-spacing 0
        color $table-color
    .k-tbody
        font-size $table-font-size

    // thead
    .k-thead
        font-size $table-thead-font-size
        color $table-thead-color
        // border-top $table-th-border-top
        background $table-thead-bg-color
        border-bottom $table-th-border-bottom
        // -webkit-backface-visibility hidden
        z-index 1
        overflow hidden
        width 100%
    .k-thead-wrapper
        display table
    th
        padding $table-th-padding
        text-align $table-th-text-align 
        font-weight $table-th-font-weight
        position relative
    .k-th
        display flex

    // sortable
    .k-sortable
        cursor pointer
    .k-sort
        margin-left $table-sort-margin-left
        position relative
        .k-icon
            display block
            height $table-sort-icon-height
            position absolute
            top 50%
            margin-top -(unit(@height / 2, rem))
            &:before
            &:after
                content ''
                border $table-sort-icon-width solid transparent
                border-color $table-sort-active-color transparent
                position absolute
            &:before
                top 0
                border-top-width 0
            &:after
                bottom 0
                border-bottom-width 0
        .icon-asc:after
        .icon-desc:before
            border-color $table-sort-non-active-color transparent

    // group
    .k-group
        cursor pointer
        max-width 100%
        .k-arrow
            display inline-block
            transition transform $transition
            float right
            margin-left $table-group-margin-left 
            line-height unit($table-thead-font-size * $line-height, rem)
    .k-group-show
        .k-group
            .k-arrow
                transform rotate(180deg)

    // resizable
    .k-resize
        height 100%
        width $table-resize-width 
        position absolute
        top 0
        left 0
        cursor ew-resize

    // tbody
    tbody
        tr
            border-bottom $table-tr-border
            &.k-hover
                background $table-tr-hover-bg-color
    td
        padding $table-td-padding
        word-wrap break-word

    // checkbox or radio
    .k-th-check
        width $table-check-width
        // FixMe: force checkbox vertical algin
        .k-checkbox
            position relative
            top -1px

    // no data
    .k-no-data
        text-align center

    .k-tbody
        overflow auto

    // fixed column
    .k-invisible
        visibility hidden
    .k-fixed-left
    .k-fixed-right
        border-top $table-th-border-top
        position absolute
        top 0
        overflow hidden
        z-index 1
        .k-thead
            width auto
        .k-tbody
            overflow-x hidden
    .k-fixed-left
        left 0
        .k-tbody
            margin-right -15px
    .k-fixed-right
        right 0
        .k-thead-wrapper
        .k-tbody
        .k-tbody table
            float right
    &.k-scroll-left .k-fixed-right
    &.k-scroll-middle .k-fixed-right
        box-shadow $box-shadow
    &.k-scroll-right .k-fixed-left
    &.k-scroll-middle .k-fixed-left
        box-shadow $box-shadow

    // type: border
    &.k-border
        border-left $table-border-left
        border-right $table-border-right

    // sticky
    &.k-sticky
        z-index 2

    // sticky scrollbar
    &.k-sticky-scrollbar
        .k-scrollbar
            position fixed 
            overflow-x auto
            overflow-y hidden
            bottom 0
            z-index $max-z-index
            > .k-inner
                height 1px
    // loading
    > .k-spin
        z-index 2

.k-table-wrapper
    // overflow auto
    overflow hidden
    border-top $table-th-border-top
    background $table-bg-color

// group
.k-table-dropdown
    .k-item.k-hover
        background $table-group-item-hover-bg-color 
        color $table-group-item-hover-color 
    &:not(.k-multiple)
        .k-item.k-active
            color $table-group-item-active-color 


requireTheme('table')
